<template>
    <div>
        <el-dialog

            @close="closeEditCustomerContacts"
            :before-close="handleClose"
            title="Edit Customer Contacts"
            v-dialog-drag
            :visible.sync="visible">
            <el-form ref="editContactsForm" :model="editContactsForm" :rules="addContactsRules" size="medium"
                     label-width="100px"
                     label-position="left">
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="100px" label="customerId" prop="customerId">
                            <el-input v-model="customer.customerId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="100px" label="customerName" prop="customerName">
                            <el-input v-model="customer.customerName" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Id" prop="contactsId">
                            <el-input v-model="editContactsForm.contactsId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Name" prop="contactsName">
                            <el-input v-model="editContactsForm.contactsName" placeholder="Please input Name" clearable
                                      :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Dept" prop="contactsDept">
                            <el-select v-model="editContactsForm.contactsDept" placeholder="Please choose Dept" filterable clearable
                                       :style="{width: '100%'}">
                                <el-option v-for="(item, index) in options.contactsDeptOptions" :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Position" prop="contactsPosition">
                            <el-select v-model="editContactsForm.contactsPosition" placeholder="Please choose Position" filterable
                                       clearable
                                       :style="{width: '100%'}">
                                <el-option v-for="(item, index) in options.contactsPositionOptions" :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Telephone" prop="contactsTelephone">
                            <el-input v-model="editContactsForm.contactsTelephone" placeholder="Please input Telephone" clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Mobilephone" prop="contactsMobilephone">
                            <el-input v-model="editContactsForm.contactsMobilephone" placeholder="Please input Mobilephone" clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Fax" prop="contactsFax">
                            <el-input v-model="editContactsForm.contactsFax" placeholder="Please input fax" clearable
                                      :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Email" prop="contactsEmail">
                            <el-input v-model="editContactsForm.contactsEmail" placeholder="Please input Email" clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="QQ" prop="contactsQq">
                            <el-input v-model="editContactsForm.contactsQq" placeholder="Please input QQ" clearable
                                      :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="60px" label="Wechat" prop="contactsWechat">
                            <el-input v-model="editContactsForm.contactsWechat" placeholder="Please input wechat" clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="resetEditCustomerContacts">Cancel</el-button>
                <el-button type="primary" size="medium" @click="handleEditCustomerContacts">Edit</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
export default {
    name: "EditCustomerContactsDialog",
    props: ['visible', 'onClose', 'callback', 'options', 'customer'],
    data() {
        return {
            editContactsForm: {
                contactsId: "",
                contactsName: "",
                contactsDept: "",
                contactsPosition: "",
                contactsTelephone: "",
                contactsMobilephone: "",
                contactsEmail: "",
                contactsFax: "",
                contactsQq: "",
                contactsWechat: "",
            },
            addContactsRules: {
                contactsName: [{
                    required: true,
                    message: 'Please input contactsName',
                    trigger: 'blur'
                }],
                contactsDept: [{
                    required: true,
                    message: 'Please choose contactsDept',
                    trigger: 'change'
                }],
                contactsPosition: [{
                    required: true,
                    message: 'Please choose contactsPosition',
                    trigger: 'change'
                }],
                contactsTelephone: [{
                    required: true,
                    message: 'Please input contactsTelephone',
                    trigger: 'blur'
                }],
                contactsMobilephone: [{
                    required: true,
                    message: 'Please input contactsMobilephone',
                    trigger: 'blur'
                }],
                contactsEmail: [{
                    required: true,
                    message: 'Please input contactsEmail',
                    trigger: 'blur'
                }],
                contactsFax: [{
                    required: true,
                    message: 'Please input contactsFax',
                    trigger: 'blur'
                }],
                contactsQq: [{
                    required: true,
                    message: 'Please input contactsQQ',
                    trigger: 'blur'
                }],
                contactsWechat: [{
                    required: true,
                    message: 'Please input contactsWechat',
                    trigger: 'blur'
                }],
            },
        }
    }, methods: {
        closeEditCustomerContacts() {
            this.onClose()
        },
        resetEditCustomerContacts() {
            this.$refs['editContactsForm'].resetFields();
            this.closeEditCustomerContacts()
        },
        handleEditCustomerContacts() {
            this.$refs['editContactsForm'].validate(valid => {
                if (!valid) return
                this.callback(this.editContactsForm)
                this.closeEditCustomerContacts()
                this.$message.success("Edit success!")
            })
        },
        handleClose(){
            this.$refs['editContactsForm'].resetFields();
            this.closeEditCustomerContacts()
        },
        setData(data) {
            this.editContactsForm = data
        }

    }
}
</script>

<style scoped>

</style>